let waitCurrentIndex = 0;
let preCurrentIndex = 0;

// 加载数据
function loadData() {
  // 初始化显示
  updateWaitList();
  updatePreList();

  // 开始滚动
  startScrolling();
}

// 更新预发货列表 - 修正：应该显示preData，包含地点信息
function updateWaitList() {
  const waitContainer = $(".rank-box:first-child .rank-list");
  const listHeader = waitContainer.find(".list-header");

  // 清空现有内容，保留表头
  waitContainer.empty().append(listHeader);

  // 显示当前5条数据 - 修正：使用preData而不是waitData
  for (let i = 0; i < 5; i++) {
    const dataIndex = (preCurrentIndex + i) % preData.length;
    const item = preData[dataIndex];

    const rankItem = $('<div class="rank-item"></div>');
    rankItem.html(`
      <div class="rank-item-td text-ellipsis-2">${item.name}</div>
      <div class="rank-item-td">${item.dim.trim()}</div>
      <div class="rank-item-td">${item.gender.trim()}</div>
      <div class="rank-item-td">${item.city.trim()}</div>
    `);
    waitContainer.append(rankItem);
  }
}

// 更新待生产列表 - 修正：应该显示waitData，包含数量信息
function updatePreList() {
  const preContainer = $(".rank-box-pre .rank-list");
  const listHeader = preContainer.find(".list-header");

  // 清空现有内容，保留表头
  preContainer.empty().append(listHeader);

  // 显示当前5条数据 - 修正：使用waitData而不是preData
  for (let i = 0; i < 5; i++) {
    const dataIndex = (waitCurrentIndex + i) % waitData.length;
    const item = waitData[dataIndex];

    const rankItem = $('<div class="rank-item"></div>');
    rankItem.html(`
      <div class="rank-item-td text-ellipsis-2">${item.name}</div>
      <div class="rank-item-td">${item.dim.trim()}</div>
      <div class="rank-item-td">${item.gender.trim()}</div>
      <div class="rank-item-td">${item.qty}</div>
    `);
    preContainer.append(rankItem);
  }
}

// 预发货列表滚动动画 - 修正：使用preData
function scrollWaitList() {
  const waitContainer = $(".rank-box:first-child .rank-list");
  const $items = waitContainer.find(".rank-item");
  const $firstItem = $items.first();

  if ($firstItem.length === 0) return;

  // 添加CSS类来控制滑出动画
  $firstItem.addClass("slide-out-up");

  // 监听动画完成事件
  setTimeout(() => {
    // 移除第一个元素
    $firstItem.remove();

    // 更新索引 - 修正：使用preCurrentIndex
    preCurrentIndex = (preCurrentIndex + 1) % preData.length;

    // 计算新插入的数据索引 - 修正：使用preData
    const newDataIndex = (preCurrentIndex + 4) % preData.length;
    const newItem = preData[newDataIndex];

    // 创建新的列表项，添加滑入动画类 - 修正：显示city而不是qty
    const newRankItem = $('<div class="rank-item slide-in-down"></div>');
    newRankItem.html(`
      <div class="rank-item-td text-ellipsis-2">${newItem.name}</div>
      <div class="rank-item-td">${newItem.dim.trim()}</div>
      <div class="rank-item-td">${newItem.gender.trim()}</div>
      <div class="rank-item-td">${newItem.city.trim()}</div>
    `);

    // 在底部添加新元素
    waitContainer.append(newRankItem);

    // 触发滑入动画
    setTimeout(() => {
      newRankItem.removeClass("slide-in-down").addClass("slide-in-complete");
    }, 50);
  }, 300); // 与CSS动画时间匹配
}

// 待生产列表滚动动画 - 修正：使用waitData
function scrollPreList() {
  const preContainer = $(".rank-box-pre .rank-list");
  const $items = preContainer.find(".rank-item");
  const $firstItem = $items.first();

  if ($firstItem.length === 0) return;

  // 添加CSS类来控制滑出动画
  $firstItem.addClass("slide-out-up");

  // 监听动画完成事件
  setTimeout(() => {
    // 移除第一个元素
    $firstItem.remove();

    // 更新索引 - 修正：使用waitCurrentIndex
    waitCurrentIndex = (waitCurrentIndex + 1) % waitData.length;

    // 计算新插入的数据索引 - 修正：使用waitData
    const newDataIndex = (waitCurrentIndex + 4) % waitData.length;
    const newItem = waitData[newDataIndex];

    // 创建新的列表项，添加滑入动画类 - 修正：显示qty而不是city
    const newRankItem = $('<div class="rank-item slide-in-down"></div>');
    newRankItem.html(`
      <div class="rank-item-td text-ellipsis-2">${newItem.name}</div>
      <div class="rank-item-td">${newItem.dim.trim()}</div>
      <div class="rank-item-td">${newItem.gender.trim()}</div>
      <div class="rank-item-td">${newItem.qty}</div>
    `);

    // 在底部添加新元素
    preContainer.append(newRankItem);

    // 触发滑入动画
    setTimeout(() => {
      newRankItem.removeClass("slide-in-down").addClass("slide-in-complete");
    }, 50);
  }, 300); // 与CSS动画时间匹配
}

// 开始滚动
function startScrolling() {
  setInterval(() => {
    // 检查数据是否足够进行滚动 - 修正：对应正确的数据源
    if (preData.length > 5) {
      scrollWaitList();
    }
    if (waitData.length > 5) {
      scrollPreList();
    }
  }, 3000); // 每3秒滚动一次
}

// 页面加载完成后开始
$(document).ready(function () {
  loadData();
});
